<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>666</title>
		<link rel="stylesheet" type="text/css" href="css/highcharts.css"/>
	</head>

	<body>
		<div id="container"> </div>
		<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/highcharts.js" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript'>
			$(function() {
				var daily = "json/test.json";
				$.getJSON(daily, function(data) {
					var obj = eval_r("(" + data + ")");
					var container = $('#container').highcharts({
						chart: {
							type: 'column'
						},
						title: {
							text: '周支出堆叠图'
						},
						xAxis: {
							categories: ['食品酒水', '衣服饰品', '行车交通', '休闲娱乐', '学习进修', '医疗保健', '其他杂项']
						},
						yAxis: {
							min: 0,
							title: {
								text: '金额(￥)'
							},
							stackLabels: {
								enabled: true,
								style: {
									fontWeight: 'bold',
									color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
								}
							}
						},
						legend: {
							align: 'right',
							x: -70,
							verticalAlign: 'top',
							y: 20,
							floating: true,
							backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
							borderColor: '#CCC',
							borderWidth: 1,
							shadow: false
						},
						tooltip: {
							formatter: function() {
								return '' + this.x + ' ' + this.series.name + ': ' + this.y + ' ' + ' Total: ' + this.point.stackTotal;
							}
						},
						plotOptions: {
							column: {
								stacking: 'normal',
								dataLabels: {
									enabled: true,
									color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
									style: {
										textShadow: '0 0 3px black, 0 0 3px black'
									}
								}
							}
						},
						series: obj
					});
				});
			});
		</script>
	</body>

</html>